import React,{Component} from 'react';
import {Button, Form, Input, Select} from 'antd';
import './FormItems.css';

const FormItem=Form.Item;
const SelectOption=Select.Option;

class FormItems extends Component{
    constructor(props){
        super(props);
        this.state={
            confirmDirty:false
        }
    }

    render() {
        const {layout,formItemLayout,items}=this.props.formSetting;
        const {getFieldDecorator}=this.props.form;
        return(
            <div>
                {
                    this.handleGetForm(layout,formItemLayout,items,getFieldDecorator)
                }
            </div>
        )
    }

    /**
     * 获取表单
     * @param layout
     * @param items
     * @param formItemLayout
     * @param getFieldDecorator
     * @returns {*}
     */
    handleGetForm(layout,formItemLayout,items,getFieldDecorator){
        const _this=this;
        return(
                <Form layout={layout?layout:''}>
                    {
                        items&&items.map((item,index)=>{
                            return(
                                <span key={index}>
                                    {
                                        _this.handleGetFormItem(item,formItemLayout,getFieldDecorator)
                                    }
                                </span>
                            )
                        })
                    }
                </Form>
            )
    }

    /**
     * 获取表单项
     * @param item
     * @param formItemLayout
     * @param getFieldDecorator
     */
    handleGetFormItem(item,formItemLayout,getFieldDecorator){
        const _this=this;
        switch (item.type) {
            case "Input":
                return <FormItem {...formItemLayout} label={item.label}>
                {
                    getFieldDecorator(item.key,{
                        rules:[{required:item.required,message:item.message}]
                    })(
                        <Input placeholder={item.placeholder}/>
                    )
                }
            </FormItem>;
            case "Number":
                return <FormItem {...formItemLayout} label={item.label}>
                    {
                        getFieldDecorator(item.key,{
                            rules:[{required:item.required,message:item.message}]
                        })(
                            <Input placeholder={item.placeholder} type={'number'}/>
                        )
                    }
                </FormItem>;
            case "Password":
                return <FormItem {...formItemLayout} label={item.label}>
                    {
                        getFieldDecorator(item.key,{
                            rules:[{required:item.required, message:item.message}]
                        })(
                            <Input placeholder={item.placeholder} type={'password'}/>
                        )
                    }
                </FormItem>;
            case "Pwd":
                return <FormItem {...formItemLayout} label={item.label} hasFeedback>
                    {
                        getFieldDecorator(item.key,{
                            rules:[
                                {
                                    required:item.required,
                                    message:item.message
                                },
                                {
                                    validator:(rule, value, callback)=>this.handleValidatePassword(rule, value, callback,item.validateKey)
                                }
                            ]
                        })(
                            <Input placeholder={item.placeholder} type={'password'}/>
                        )
                    }
                </FormItem>;
            case "ConfirmPwd":
                return <FormItem {...formItemLayout} label={item.label} hasFeedback>
                    {
                        getFieldDecorator(item.key,{
                            rules:[
                                {
                                    required:item.required,
                                    message:item.message
                                },
                                {
                                    validator:(rule, value, callback)=>this.handleCompareToFirstPassword(rule, value, callback,item.validateKey)
                                }
                            ]
                        })(
                            <Input placeholder={item.placeholder} type={'password'} onBlur={this.handleConfirmBlur}/>
                        )
                    }
                </FormItem>;
            case "Select":
                return <FormItem {...formItemLayout} label={item.label}>
                    {
                        getFieldDecorator(item.key,{
                            rules:[{required:item.required,message:item.message}]
                        })(
                            <Select placeholder={item.placeholder} mode={item.mode?item.mode:''}>
                                {
                                    item.options.map((option,index)=>{
                                        return(
                                            <SelectOption key={index} value={option.value}>{option.label}</SelectOption>
                                        )
                                    })
                                }
                            </Select>
                        )
                    }
                    {
                        item.attention?<span className="attention"> {item.attention}</span>:""
                    }
                </FormItem>;
            case "Button":
                return <FormItem {...formItemLayout} label={" "}>
                    <Button type={'primary'} icon={item.icon} onClick={item.handleOnClick.bind(this,{form:this.props.form,other:'23'})}>
                        {item.label}
                    </Button>
                </FormItem>;
            default:
                return null;
        }
    }

    handleConfirmBlur = e => {
        const { value } = e.target;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    };

    handleCompareToFirstPassword = (rule, value, callback,validateKey) => {
        const { form } = this.props;
        if (value && value !== form.getFieldValue(validateKey)) {
            callback('密码不一致！');
        } else {
            callback();
        }
    };

    handleValidatePassword = (rule, value, callback,validateKey) => {
        console.log(validateKey)
        const { form } = this.props;
        if (value && this.state.confirmDirty) {
            form.validateFields([validateKey], { force: true });
        }
        callback();
    };
}

export default Form.create()(FormItems);
